import React from "react";
import "./TodoMain.css";
//导入 sweetalert2
import Swal from 'sweetalert2';
export default function TodoMain({ todos, checkTodo, removeTodo }) {
  return (
    <ul className="todo-main">
      {todos.map((item) => {
        return <li key={item.id}>
                <label>
                  <input type="checkbox" checked={item.done} onChange={(e) => {
                    //测试
                    //获得多选框点击之后的选中状态
                    //更新当前任务的完成状态
                    checkTodo(item.id, e.target.checked);
                  }} />
                  <span className={item.done ? "done" : null}>{item.title}</span>
                </label>
                <button className="btn btn-danger" onClick={() => {
                  //弹出确认框
                  // if(!window.confirm('您确认要删除该条数据么?')) return;
                  // removeTodo(item.id);
                  //成功提醒
                  // Swal.fire({
                  //   text: '删除成功',
                  //   icon: 'success',
                  //   confirmButtonText: 'OK'
                  // })

                  //确认
                  Swal.fire({
                    title: '温馨提示',
                    text: '您确定要删除该任务么',
                    showCancelButton: true,
                    icon: 'question',
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                  }).then((result) => {
                    //如果用户点击的是确定
                    if (result.isConfirmed) {
                      Swal.fire({
                        text: '删除成功',
                        icon: 'success',
                      })
                      //删除任务
                      removeTodo(item.id);
                    }
                  });
                }}>删除</button>
              </li>
      })}
      
      {todos.length === 0 && <li style={{padding: 25, textAlign: 'center'}}>暂无数据</li>}
    </ul>
  );
}
